<template>
  <header class="header-container">
    <div class="title-container">
      <img :src="logo" alt="" />
    </div>
    <div class="img-container">
      <img :src="zs" alt="" />
    </div>
    <div class="li-container">
      <ul>
        <li
          v-for="(item, index) of navList"
          :key="index"
          @click="pathTarget(item.field)"
        >
          {{ item.title }}
        </li>
      </ul>
    </div>
    <div class="search-container">
      <i class="iconfont iconsousuo" @click="pathTarget('search')"></i>
    </div>
  </header>
</template>

<script>
import { NAV, IMG_URL } from "@/config/config";
export default {
  name: "Header",
  data() {
    return {
      navList: NAV,
      logo: IMG_URL + "logo.png",
      zs: IMG_URL + "zs.png"
    };
  },
  methods: {
    pathTarget(target) {
      this.$router.push({ path: target });
    }
  }
};
</script>

<style lang="scss" scoped>
.header-container {
  width: 100%;
  height: 114px;
  background-color: #ffff;
  box-sizing: border-box;
  position: relative;
  box-shadow: #e5e5e5 0 10px 10px;
  .title-container {
    position: absolute;
    left: 70px;
    font-size: 30px;
    font-family: "微软雅黑";
    font-weight: bold;
    line-height: 114px;
  }
  .img-container {
    position: absolute;
    width: 115px;
    height: 110px;
    left: 167px;
  }
  .li-container {
    width: 600px;
    margin: 0 auto;
    padding-top: 53px;
    ul {
      list-style: none;
      margin: 0;
      li {
        margin-left: 70px;
        float: left;
        width: 60px;
        height: 35px;
        text-align: center;
        font-size: 16px;
        font-family: "微软雅黑";
      }
      li:hover {
        color: #f2db4d;
        border-bottom: 1px solid #f2db4d;
        cursor: pointer;
      }
    }
  }
  .search-container {
    position: absolute;
    top: 45px;
    right: 80px;
    font-size: 25px;
    cursor: pointer;
  }
  .search-container:hover {
    color: #f2db4d;
  }
}
</style>